import deviceDetailHtml from '../../assets/partials/device-detail.html'
import BootstrapDialog from 'bootstrap3-dialog';
import './tunnel-list';
import echarts from 'echarts';

$.detail = function detail(sn) {

    $.dialogShow({
        title: "设备详情",
        size: BootstrapDialog.SIZE_WIDE,
        message: $("<div>").html(deviceDetailHtml),
        onshown: function(dialog) {
            let body = dialog.getModalBody()[0];


            var $tunnelManageBtn = $(body).find("#tunnelManage");
            $tunnelManageBtn.on('click', {
                dialog: dialog
            }, function(event) {
                $.getTunnelList(sn);
            });

            var $createTunnelBtn = $(body).find("#createTunnel");
            $createTunnelBtn.on('click', {
                dialog: dialog
            }, function(event) {
                $.createTunnel(sn);
            });

            $.myAjax({
                url: "device/getDevice.do",
                data: {
                    sn: sn
                },
                success: function(res) {
                    let device = res.data;
                    $(body).find("#sn").text(device.sn);
                    $(body).find("#aliasName").text(device.aliasName);
                    $(body).find("#createTime").text(device.createTime);
                    $(body).find("#status").text(device.statusDesc);
                    $(body).find("#deviceClass").text(device.deviceClass);
                    $(body).find("#deviceType").text(device.deviceTypeDesc);
                }
            });
            $.myAjax({
                url: "log/getCurrentSysInfoLog.do",
                data: {
                    sn: sn
                },
                success: function(res) {
                    let sysinfo = res.data;
                    let memData = {
                        title: "内存使用率",
                        subtext: sysinfo.memoryRate + "%",
                        data: [{
                            value: 100 - sysinfo.memoryRate,
                            name: '未使用'
                        }, {
                            value: sysinfo.memoryRate,
                            name: '已使用'
                        }]
                    }
                    $.annularChart($(body).find("#memory")[0], memData);
                    let cpuData = {
                        title: "CUP使用率",
                        subtext: sysinfo.cpuRate + "%",
                        data: [{
                            value: 100 - sysinfo.cpuRate,
                            name: '未使用'
                        }, {
                            value: sysinfo.cpuRate,
                            name: '已使用'
                        }]
                    }
                    $.annularChart($(body).find("#cpu")[0], cpuData);
                }
            });
            $.myAjax({
                url: "log/getFlowLog.do",
                data: {
                    sn: sn
                },
                success: function(res) {
                    let flows = res.data;
                    let xAxisData = [];
                    let recv = [];
                    let send = [];
                    for (let i = flows.length - 1; i >= 0; i--) {
                        xAxisData.push(flows[i].createTime);
                        recv.push(flows[i].recv);
                        send.push(flows[i].send);
                    }
                    let flowDate = {
                        legendData: ['接受流量', '发送流量'],
                        xAxisData: xAxisData,
                        series: [{
                                name: '接受流量',
                                type: 'line',
                                data: recv
                            },
                            {
                                name: '发送流量',
                                type: 'line',
                                data: send
                            }
                        ]
                    }
                    $.lineChart($(body).find("#flow")[0], flowDate)
                }
            });
            $(body).find('#device-mgt').dataTable({
                "dom": 'rt<"clearfix table-bottom"ilp>',
                "searching": false,
                "ordering": false,
                "serverSide": true,
                "processing": true,
                "language": {
                    'emptyTable': '当前暂无数据',
                    'info': '第 _PAGE_ 页 / 总 _PAGES_ 页，',
                    'infoEmpty': '',
                    'lengthMenu': '每页 _MENU_ ',
                    "paginate": {
                        "first": "第一页",
                        "last": "最后一页",
                        "next": "下一页",
                        "previous": "上一页"
                    }
                },
                "pagingType": "full_numbers",
                "columns": [{
                        "data": "logType"
                    },
                    {
                        "data": "operateTime"
                    },
                    {
                        "data": "logDetail"
                    }
                ],
                "ajax": function(data, callback, settings) {
                    var pageSize = data.length;
                    var page = data.start / pageSize + 1;
                    data.pageSize = pageSize;
                    data.page = page;
                    data.sn = sn;
                    $.myAjax({
                        url: "device/getMgt.do",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify(data),
                        success: function(result) {
                            result.recordsTotal = result.total;
                            result.recordsFiltered = result.total;
                            return callback(result);
                        }
                    });
                }
            });

        }
    });
}
